<template>
    <view>
        <view class="search_box  p_col_30 p_row_30">
            <u-search  v-model="keyword" placeholder="请输入关键字进行搜索" @search="search" @custom="search"></u-search>
        </view>
        
        <view class="hot_search p_row_30 u-m-t-10">
            <view class="title u-font-30 ">
                热门搜索
            </view>
            <view class="tag u-flex u-flex-wrap u-m-t-20">
                <view class="tag_item u-m-r-20 m_b_20" v-for="(item,index) in tag_list" :key="index">
                    <u-tag :text="item.title" mode="dark" bg-color="#f0f2f5" color="#999" @click="$x.to(`clazz/goods-list?keyword=${item.title}`)"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword:"",
                tag_list:[
                    {
                        title:"天燃气灶双灶",
                    },
                    {
                        title:"魔术头巾",
                    },
                    {
                        title:"自动吸尘器",
                    },
                    {
                        title:"罗汉果茶",
                    },
                    {
                        title:"双灶",
                    },
                    {
                        title:"魔术头",
                    },
                    {
                        title:"自动吸尘器自动吸尘器",
                    },
                    {
                        title:"罗汉果茶自动吸尘器",
                    },
                    {
                        title:"罗汉果茶自动吸尘器",
                    },
                ]
            };
        },
        onLoad(option) {
            this.keyword = option.keyword || ''
        },
        methods: {
            search(){
                this.$x.to(`clazz/goods-list?keyword=${this.keyword}`)
            }
        },
    };
</script>



<style lang="scss" scope>
    page{
        background-color: #fff;
    }

</style>
